<template>
  <div class="mine-edit">
    <!-- 1.导航栏 -->
    <van-nav-bar title="编辑自恋" left-arrow @click-left="$router.go(-1)" />
    <!-- 头2.像区域 -->
    <div class="avatar">
      <van-image
        fit="cover"
        round
        :src="$store.state.userInfo.photo"
      ></van-image>
    </div>
    <!-- 3.资料cell区域 -->
    <!-- <van-cell title="单元格" is-link :value="userInfo.name" />
    <van-cell title="单元格" is-link :value="userInfo.name" />
    <van-cell title="单元格" is-link :value="userInfo.name" /> -->
    <van-cell
      title="名称"
      :value="userInfo.name"
      is-link
      @click="showNameDialog"
    />
    <van-cell
      title="性别"
      :value="userInfo.gender ? '男' : '女'"
      is-link
      @click="showSexAction"
    />
    <van-cell
      title="生日"
      :value="userInfo.birthday"
      is-link
      @click="showData"
    />

    <!-- v-model控制显示和隐藏的 -->
    <van-dialog
      v-model="dialogShow"
      title="修改名称"
      show-cancel-button
      class="diglog-name"
      @confirm="changname"
    >
      <!-- 输入框 -->
      <van-field v-model="editname" ref="nameinp" />
    </van-dialog>

    <!-- //编辑个人信息之修改性别 -->
    <van-action-sheet
      @select="changsex"
      v-model="actionshow"
      :actions="actions"
      cancel-text="取消"
      description="请选择性别"
      close-on-click-action
    />
    <!-- //编辑个人信息之修改日期 -->
    <van-action-sheet v-model="Datashow" title="标题">
      <div class="content">
        <van-datetime-picker
          @confirm="changeData"
          v-model="currentDate"
          type="date"
          title="选择年月日"
        />
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import { editProfileAPI } from "@/api"; //编辑用户个人信息接口
export default {
  data() {
    return {
      dialogShow: false, //改名字的框显示
      editname: "", //用户名字
      actionshow: false, //改性别的框显示
      actions: [
        { name: "男", value: 1 },
        { name: "女", value: 0 },
      ],
      Datashow: false, //改生日的框显示
      // minDate: new Date(2020 - 0 - 1),
      // maxDate: new Date(2025 - 10 - 1),
      currentDate: new Date(2021 - 0 - 17),
    };
  },
  // 解决网址进入edit页面报错（没有获取用户信息）
  computed: {
    //用户编辑随改随变
    userInfo() {
      return this.$store.state.userInfo;
    },
  },
  // async created() {
  //   if (!this.$store.state.userInfo.name) {
  //     // 发请求获取用户信息
  //     let res = await userInfoAPI();
  //     console.log(res);
  //     this.info = res.data.data; //渲染页面的info
  //     console.log(res.data.data);
  //     this.$store.commit("setUserInfo", res.data.data); //保存到vuex里
  //   }
  // },
  created() {
    this.$store.dispatch("reqUserInfo");
  },
  methods: {
    //个人用户信息编辑之点击修改名字
    showNameDialog() {
      this.dialogShow = true;
      this.editname = this.userInfo.name;

      //Vue组件用的是懒加载，默认是隐藏的，vue就没有去渲染它，因为渲染Dom是异步代码，需要上面的代码执行完了才开始渲染，所以this.$refs找不到input就显示undefined,解决方法：要用一个$nextTick
      //加焦点
      this.$nextTick(() => {
        // 等Dom渲染完毕，再去找到input，再让它获得焦点
        this.$refs.nameinp.focus();
      });
    },
    //个人用户信息编辑之点击修改性别
    showSexAction() {
      this.actionshow = true;
    },

    //个人用户信息编辑之点击修改生日
    showData() {
      this.Datashow = true;
    },
    //发请求
    //编辑个人信息之修改名字
    async changname() {
      //发(instance)请求，修改名字
      let res = await editProfileAPI({
        name: this.editname,
      });
      console.log(res); //显示axios修改成功，但是vuex里没有修改，所以下面开始修改(不能直接通过state修改，用里面的方法库修改)
      this.$store.commit("setUserInfo", {
        // 利用vuex保存的旧信息加上要修改的某一项信息就可以改了,组成一个新对象
        ...this.$store.state.userInfo,
        name: this.editname, //只穿过去一个name页面部分地方会显示空白，因为没传其他值会undefined
      });
    },
    //编辑个人信息之修改性别
    async changsex(data) {
      //发(instance)请求，修改性别
      let res = await editProfileAPI({
        gender: data.value,
      });
      // console.log(data.value);//0 / 1代表性别
      this.$store.commit("setUserInfo", {
        // 利用vuex保存的旧信息加上要修改的某一项信息就可以改了,组成一个新对象
        ...this.$store.state.userInfo,
        gender: data.value, //只穿过去一个name页面部分地方会显示空白，因为没传其他值会undefined
      });
    },

    //编辑个人信息之修改生日
    async changsex(data) {
      //发(instance)请求，修改性别
      let res = await editProfileAPI({
        gender: data.value,
      });
      // console.log(data.value);//0 / 1代表性别
      this.$store.commit("setUserInfo", {
        // 利用vuex保存的旧信息加上要修改的某一项信息就可以改了,组成一个新对象
        ...this.$store.state.userInfo,
        gender: data.value, //只穿过去一个name页面部分地方会显示空白，因为没传其他值会undefined
      });
    },

    //编辑个人信息之修改日期
    async changeData(data) {
      //发(instance)请求，修改性别
      let res = await editProfileAPI({
        birthday: data.currentDate,
      });
      // console.log(data.toLocaleDateString());
      this.$store.commit("setUserInfo", {
        // 利用vuex保存的旧信息加上要修改的某一项信息就可以改了,组成一个新对象
        ...this.$store.state.userInfo,
        birthday: data.toLocaleDateString().replace(/\//g, "-"), //只穿过去一个name页面部分地方会显示空白，因为没传其他值会undefined
      });
      this.Datashow = false;
    },
  },
};
</script>

<style lang="less" scoped>
.mine-edit {
  .avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 140px;
    .van-image {
      width: 100px;
      height: 100px;
    }
  }
  .diglog-name {
    .van-field {
      border: 1px solid gold;
    }
  }
}
</style>
